<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>几个注意点</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            几个注意点:
            1. 关于组件名
                一个单词组成:
                    写法一:首字母小写: school
                    写法二:首字母大写: School
                多个单词组成:
                    写法一: kebab-case命名: my-school
                    写法二: CamelCase命名: MySchool(需要Vue脚手架支持)
                备注:
                    (1) 组件名尽可能回避HTML中已有的元素名称,例如: h2. H2都不行
                    (2) 可以使用name配置项指定组件再开发者工具中呈现的名字.
            2. 关于组件标签:
                写法一: <school></school>
                写法二: <school/>
                备注: 不使用脚手架时,<school/>会导致后续组件不能渲染.
            3. 一个简写方式:
                const school = Vue.extend(options) 可简写为: const school = options
         -->
        <div id="root">
            <!-- 第三步: 使用组件 -->
            <school></school>
            <hr>
            <student></student>
            <hello></hello>
        </div>
        <div id="root2">
            <hello></hello>
        </div>        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示
        
        // 第一步:定义学校组件
        const school = Vue.extend({
            name: 'school',
            template: `
                <div>
                    <h2>学校名称: {{name}}</h2>  
                    <h2>学校地址: {{addr}}</h2>    
                    <button @click='change'>修改地址为上海</button>
                </div>
            `,
            data(){
                return {
                    'name': '清华',
                    'addr': '北京'
                }
            },
            methods: {
                change: function() {
                    this.addr = '上海'
                }
            },
        })

        // 第一步:定义学生组件
        const student = Vue.extend({
            template: `
                <div>
                    <h2>学生名称: {{name}}</h2>  
                    <h2>学生年龄: {{age}}</h2>    
                </div>
            `,
            data(){
                return {
                    'name': '张三',
                    'age': 18
                }
            }
        })

        // 第一步:定义学生组件
        const hello = Vue.extend({
            template: `
                <div>
                    <h2>你好: {{name}}</h2>   
                </div>
            `,
            data(){
                return {
                    'name': '李四'
                }
            }
        })

        // 全局注册组件
        Vue.component('hello', hello)

        // 创建Vue实例，开端
        new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            // 第二步:注册组件
            components: {
                school: school,
                student: student
            }
        })

        new Vue({
            el: '#root2'
        })
    </script>
</html>
